<template>
  <div class="comp-container">
    <div class="flex-center mb-16">
      <SectionTitle :title="sectionTitle">
        <div class="select-text"> 已选择 <span>{{ selectedData.length }}</span> 个账号</div>
      </SectionTitle>
      <PlainCreateBtn @click="openDrawer">选择账号</PlainCreateBtn>
    </div>
    <div class="table-container">
      <el-table
        :data="handleSpliceData"
        element-loading-text="加载中..."
        empty-text="暂无数据"
        class="fb-table"
        header-cell-class-name="order-data-header-cell"
        fit
        hightlight-current-row>
        <EmptyPlaceholder slot="empty" mode="table" />
        <el-table-column label="平台" min-width="120" align="left">
          <template slot-scope="scope">
            <div class="flex-center">
              <PlatformIcon :data="scope.row.platformName" />
              <ToolTip :content="scope.row.platformName" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="账号" min-width="180" align="left">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.accountName" />
          </template>
        </el-table-column>
        <el-table-column label="账号ID" min-width="120" align="left">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.accountCode" />
          </template>
        </el-table-column>
        <el-table-column align="left" label="粉丝量" min-width="110">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.fansNum | numberTextFormat(1)" />
          </template>
        </el-table-column>
        <el-table-column align="left" label="运营模式" min-width="110">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.operatingModelName" />
          </template>
        </el-table-column>
        <el-table-column align="left" label="标签" min-width="200">
          <template slot-scope="scope">
            <el-tooltip v-if="scope.row.tagName && scope.row.tagName.length" :open-delay="800" placement="top" effect="dark">
              <div slot="content" style="max-width:300px">{{ handleStr(scope.row.tagName) }}</div>
              <div class="tag-wrap">
                <span
                  v-for="(tag,index) in handleTags(scope.row.tagName)"
                  :key="index"
                  :style="tag.color ? `color:${tag.color};background:${changeColorAlphaVal(tag.color, 0.14)}` : ''"
                  class="tag">
                  {{ tag.name }}
                </span>
                <div v-if="scope.row.tagName.length > 3">...</div>
              </div>
            </el-tooltip>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="地域" min-width="110">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.region" />
          </template>
        </el-table-column>
        <el-table-column align="left" label="接单偏好">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.orderPreference" />
          </template>
        </el-table-column>
        <el-table-column align="left" label="供应商" min-width="110">
          <template slot-scope="scope">
            <ToolTip v-if="scope.row.channelId" :content="scope.row.supplier" style="cursor:pointer;color:#406EFF;" @click.native="toSupplierDetail(scope.row.channelId)"/>
            <div v-else style="color:#999999">未关联</div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="微信号" min-width="120">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.wxCode" />
          </template>
        </el-table-column>
        <el-table-column align="left" label="手机" min-width="120">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.phone" />
          </template>
        </el-table-column>
        <el-table-column align="left" label="更新人" prop="updator" min-width="110">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.updator" />
          </template>
        </el-table-column>
        <el-table-column align="left" label="签单签约经纪" min-width="110">
          <template slot-scope="scope">
            <CheckUserInfo v-if="scope.row.agentName" :label="scope.row.agentName" :user-id="scope.row.agentId" />
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="签约所属部门" min-width="130">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.signDeptName" />
          </template>
        </el-table-column>
        <el-table-column align="left" label="创建时间" min-width="160" prop="createTime">
          <template slot-scope="scope">
            <ToolTip :content="formatTime(scope.row.createTime, 'YYYY/MM/DD HH:mm:ss')" />
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" min-width="80" align="left">
          <template slot-scope="scope">
            <div class="button-text" @click="deleteRelated(scope.$index)">删除</div>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <el-pagination
          v-show="selectedData.length > 10"
          :current-page="currPage"
          :page-size="perPage"
          :total="selectedData.length"
          :small="showMobilePage"
          :page-sizes="[10, 20, 50, 100]"
          :layout="showMobilePage ? 'prev, pager, next, jumper':'total, prev, pager, next, sizes, jumper'"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </el-row>
    </div>
    <AccountDialog ref="accountDialogRef" v-bind="$attrs" @setSelectedData="setSelectedData"/>
  </div>
</template>

<script>
import SectionTitle from '@/components/Title';
import EmptyPlaceholder from '@/components/Common/emptyPlaceholder';
import AccountDialog from '@/views/flyNotice/components/accountDialog';
import PlatformIcon from '@/components/Common/platformIcon';
import { mapState } from 'vuex';
import { format as formatTime } from '@/filters/date';
import { numberTextFormat } from '@/filters/number';
import { changeColorAlphaVal } from '@/utils/tools';

export default {
  filters: {
    numberTextFormat
  },
  components: {
    SectionTitle,
    AccountDialog,
    EmptyPlaceholder,
    PlatformIcon
  },
  props: {
    sectionTitle: {
      type: String,
      default: '询单账号'
    }
  },
  data() {
    return {
      currPage: 1,
      perPage: 10,
      selectedData: []
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    handleSpliceData() {
      if (!Array.isArray(this.selectedData) || !this.selectedData.length) return [];
      return this.selectedData.slice((this.currPage - 1) * this.perPage, this.currPage * this.perPage);
    }
  },
  methods: {
    formatTime,
    changeColorAlphaVal,
    handleSizeChange(val) {
      this.perPage = val;
    },
    handleCurrentChange(val) {
      this.currPage = val;
    },
    deleteRelated(index) {
      const idx = index + ((this.currPage - 1) * this.perPage);
      this.selectedData.splice(idx, 1);
      if (((this.currPage - 1) * this.perPage) >= this.selectedData.length) {
        this.currPage = 1;
      }
    },
    // 账号资源页面快速发起时 选中账号
    setBoundAccountData() {
      const selectedData = sessionStorage.getItem('inBoundAccountData');
      if (selectedData) {
        this.selectedData = JSON.parse(selectedData);
        this.$nextTick(() => {
          this.openDrawer('selected');
        });
      }
    },
    setAccountData(list) {
      this.selectedData = Array.isArray(list) ? list : [];
    },
    openDrawer(curTabName = 'all') {
      if (this.selectedData.length) {
        this.$refs['accountDialogRef'].initData(this.selectedData);
      }
      this.$refs['accountDialogRef'].openDrawer(curTabName);
    },
    clearLoading() {
      this.$refs['accountDialogRef'].clearLoading();
    },
    handleAccountLoading() {
      this.$refs['accountDialogRef'].addLoading = false;
    },
    handleStr(tag) {
      if (!tag || tag.length === 0) {
        return [];
      }
      return tag.map(el => el.name).join(',');
    },
    handleTags(tag = []) {
      if (!tag || tag.length === 0) {
        return [];
      }
      return tag.slice(0, 3);
    },
    setSelectedData(data) {
      this.selectedData = data;
    },
    // 跳转销售供应商
    toSupplierDetail(channelId) {
      if (channelId) {
        const url = this.$router.resolve({
          name: 'supplierManageDetail',
          params: { id: channelId }
        });
        window.open(url.href, '_blank');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.comp-container {
  padding: 0 24px;
  .select-text {
    color: #AEB6C7;
    font-size: 14px;
    margin-left: 8px;
    span {
      color: #5F77C3;
      font-weight: 700;
    }
  }
  .table-container {
    position: relative;
    margin-top: 10px;
    .add-btn {
      position: absolute;
      right: 0;
      top: -44px;
    }
  }
  .tag-wrap{
    display: flex;
    align-items: center;
  }
  .tag{
    display: inline-block;
    max-width: 60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color:#406EFF;
    font-size: 12px;
    padding: 0px 8px;
    background: #eff4ff;
    border-radius: 10px;
    margin-right: 4px;
  }
}
</style>
